<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/files/admin/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="/files/admin/css/houtai.css"/>
  <style media="screen">
  /*修改弹窗样式*/
  a,a:hover{ text-decoration:none; color:#333}
  .shadow {position:fixed; width:100%; height:100%; background:#000; opacity:0.3; filter:alpha(opacity:30);left:0; top: 0;}
  .modal-dialog{position:fixed; left:40%; top:0;z-index: 999;}
  .toppic {
    width: 100%;
    height: 130px;
    color: #fff;
    font-size: 26px;
    font-family: "Microsoft YaHei";
    background: url(/files/admin/images/nav.jpg) no-repeat;
    background-size: 100% 100%;
    margin-bottom: 50px;
}
  </style>
  <title>导航</title>
  </head>
  <body>
    <% include components/top.inc.ejs %>
    <!-- 主体展示页 -->
      <div class="container">
        <div class="toppic"></div>
        <div>
          <a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#add" style="background-color:#34a853;border: 0px;"><span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;编 辑</a>
        </div>
        <!-- 1.添加模态框 -->
        <div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">联系我们——Contact US</h4>
          </div>
          <div class="modal-body">
            <form action="?" method="post" enctype="multipart/form-data">
              <div class="form-group">
                <label for="recipient-name" class="control-label">菜单名称:</label>
                <input type="text" class="form-control" name="name" placeholder="请输入菜单名称">
              </div>
              <div class="form-group">
                <label for="recipient-name" class="control-label">菜单地址:</label>
                <input type="text" class="form-control" name="href" placeholder="请输入菜单地址">
              </div>
              <div class="form-group">
                <label for="recipient-name" class="control-label">父级菜单ID:</label>
                <input type="number" class="form-control" name="parent_id" placeholder="0表示第一级级菜单">
              </div>
              <div class="form-group">
                <label for="text" class="control-label">菜单层级数:</label>
                <input type="number" class="form-control" name="level" placeholder="请输入菜单层级数">
              </div>
              <div class="form-group">
                <label for="text" class="control-label">菜单类别:</label>
                <input type="text" class="form-control" name="type" placeholder="例如：news">
              </div>
              <input type="submit" class="btn btn-success" value="添加">
              <button type="button" class="btn btn-warning " data-dismiss="modal">取消</button>
              
            </form>
          </div>
        </div>
        </div>
        </div>
        <script >
        $('#add').modal(options)
        })
        </script>
        
        <table class="table table-striped">
          <caption style="color:#b8a05c"><h3>实现菜单无限级次</h3></caption>
          <thead>
            <tr>
              <th>菜单ID</th>
              <th>菜单名称</th>
              <th>菜单地址</th>
              <th>父级菜单ID</th>
              <th>菜单层级数</th>
              <th>菜单类别</th>
            </tr>
          </thead>
          <tbody>
            <% for(var i=0;i<navs.length;i++){ %>
            <tr>
              <td><%=navs[i].ID%></td>
              <td><%=navs[i].name%></td>
              
              <td><%=navs[i].href%></td>
              <td><%=navs[i].parent_id%></td>
              <td><%=navs[i].level%></td>
              <td><%=navs[i].type%></td>
              <td>
                <button class="btn btn-sm btn-danger"><a href="?act=del&id=<%=navs[i].ID%>" onclick="return confirm('你真的要删吗？')">删除</a></button>
              </td>
            </tr>
            <% } %>
          </tbody>
        </table>

<!-- 修改框 -->
  <% if(typeof mod_data!='undefined'){ %>
        <div class="shadow"></div>
        <div class="modal-dialog" style="background-color: #e5eecc; padding:10px 8px 20px 8px;">
            <form action="?" method="post">
              <div class="form-group">
                <label for="recipient-name" class="control-label">菜单名称:</label>
                <input type="text" class="form-control" name="name"  value="<%= mod_data.name %>">
              </div>
              <div class="form-group">
                <label for="recipient-name" class="control-label">菜单地址:</label>
                <input type="text" class="form-control" name="href"  value="<%= mod_data.href %>">
              </div>
              <div class="form-group">
                <label for="recipient-name" class="control-label">父级菜单ID:</label>
                <input type="number" class="form-control" name="parent_id"  value="<%= mod_data.parent_id %>">
              </div>
              <div class="form-group">
                <label for="text" class="control-label">菜单层级数:</label>
                <input type="number" class="form-control" name="level"  value="<%= mod_data.level %>">
              </div>
              <div class="form-group">
                <label for="text" class="control-label">菜单类别:</label>
                <input type="text" class="form-control" name="type"  value="<%= mod_data.type %>">
              </div>
              <a type="button" class="btn btn-info" href="/admin/contact">取消</a>
              <input type="submit" class="btn btn-danger" value="修改">
            </form>
        </div>
    <% } %>
  </div>



    <% include components/bottom.ejs %>
  </body>
  <script src="/files/admin/js/jquery.min.js"></script>
  <script src="/files/admin/js/bootstrap.min.js"></script>
  </html>
